<template>
  <div class="dir-container">
    <div class="top">
      <div class="dir-title">
        <div class="icon">
          <i class="iconfont icon-car"></i>
          <i class="iconfont icon-bus"></i>
          <i class="iconfont icon-walking"></i>
        </div>
        <div class="close" @click="closeDir"><i class="iconfont icon-close"></i></div>
      </div>
      <div class="dir-content">
        <i class="iconfont icon-switchroute"></i>
        <div class="dir-item">
          <div class="qidian">
            <div class="title">起</div>
            <input type="text" placeholder="请输入起点" />
          </div>
          <div class="tujingdian" v-for="(item, index) in tujingList" :key="index">
            <div class="title">经</div>
            <input type="text" placeholder="请输入途经点" />
            <i class="iconfont icon-jianhao" @click="removeTujing(index)" style="cursor: pointer;"></i>
          </div>
          <div class="zhongdian">
            <div class="title">终</div>
            <input type="text" placeholder="请输入终点" />
          </div>
        </div>
        <i class="iconfont icon-jia" @click="addTujing"></i>
      </div>
      <div class="dir-footer">
        <div class="clearRoute">
          <span>清除路线</span>
        </div>
        <div class="tripMode">
          <span>开车去</span>
        </div>
      </div>
    </div>
    <div class="dir-bottom">
      <div class="history">
        <i class="iconfont icon-shijian"></i>
        <span>路线搜索记录</span>
      </div>
      <div class="history-item">
        <i class="iconfont icon-search"></i>
        <span>天安门</span>
        <i class="iconfont icon-right"></i>
        <span>北京大学</span>
      </div>
      <div class="history-item">
        <i class="iconfont icon-search"></i>
        <span>天安门</span>
        <i class="iconfont icon-right"></i>
        <span>北京大学</span>
      </div>
      <div class="history-item">
        <i class="iconfont icon-search"></i>
        <span>天安门</span>
        <i class="iconfont icon-right"></i>
        <span>北京大学</span>
      </div>
    </div>
    <div id="car-panel"></div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const tujingList = ref([])
const addTujing = () => {
  if (tujingList.value.length < 6) {
    tujingList.value.push({ value: '' })
  }
}
const removeTujing = (index) => {
  if (tujingList.value.length > 0) {
    tujingList.value.splice(index, 1)

  }
}
const closeDir = () => {
  document.querySelector('.dir-container').style.display = 'none'
}
</script>
<style lang="scss">
.dir-container {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  width: 360px;

  .top {
    max-height: 480px;
    width: 100%;
    background-color: #3d93fd;
    border-radius: 5px;

    .dir-title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;

      .close {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 10px;
        top: 10px;
        color: #fff;
        cursor: pointer;
      }

      .icon {
        display: flex;
        align-items: center;
        gap: 50px;

        .iconfont {
          font-size: 20px;
          color: #fff;
        }
      }
    }

    .dir-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      .iconfont {
        font-size: 14px;
        color: #fff;
      }

      .icon-jia {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        background-color: #54a0fb;
        border: 1px solid #54a0fb;
        border-radius: 50%;
        cursor: pointer;
      }

      .dir-item {

        .qidian,
        .tujingdian,
        .zhongdian {
          .title {
            margin-right: 10px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 34px; // 添加行高
            font-size: 14px; // 确保字体大小与输入框一致
          }

          width: 270px;
          height: 34px;
          display: flex;
          background-color: #3587eb;
          padding: 0 10px;
          align-items: center;
          font-size: 14px;
          color: #fff;
          margin-bottom: 10px;

          input {
            width: 210px;
            height: 34px;
            border: none;
            outline: none;
            background-color: transparent;
            color: #fff;
            font-size: 14px;
            border-radius: 5px;

            &::placeholder {
              color: #a8d4fe;
              font-size: 14px;
            }
          }

        }
      }
    }

    .dir-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 50px;

      .clearRoute {
        color: #fff;
        font-size: 14px;
      }

      .tripMode {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        width: 92px;
        height: 32px;
        background-color: #559ffb;
        color: #fff;
      }

    }
  }

  .dir-bottom {
    max-height: 350px;
    padding: 0 10px;
    background-color: #ffffff;

    .history {
      height: 47px;
      display: flex;
      align-items: center;
      font-size: 14px;
      gap: 10px;
      border-bottom: 1px dashed #e5e5e5;
    }

    .history-item {
      display: flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      color: #757776;
      font-size: 12px;
    }
  }

}
</style>
